<template>
  <a-card>
    <a-form @submit="handleSubmit" :form="form" class="form">
      <a-row :gutter="[8]">
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入编码" />
          </a-form-item>
        </a-col>
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入名称" />
          </a-form-item>
        </a-col>
        <a-col :xl="{ span: 8, offset: 2 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
          <a-form-item>
            <a-space>
              <a-button type="primary">查询</a-button>
              <a-button>重置</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <vxe-toolbar>
      <template #buttons>
        <a-space>
          <a-button type="primary">添加</a-button>
          <a-button>导入</a-button>
          <a-button type="danger">批量删除</a-button>
        </a-space>
      </template>
    </vxe-toolbar>
    <vxe-table ref="xTable1" border stripe height="400"
      :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
      :row-config="{ isHover: true }" :data="tableData"
      :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
      <vxe-column type="checkbox" width="40"></vxe-column>
      <vxe-column type="seq" width="30"></vxe-column>
      <vxe-column field="容器码" title="容器码" sortable width="180"></vxe-column>
      <vxe-column field="通知单号" title="通知单号" sortable width="180"></vxe-column>
      <vxe-column field="组托时间" title="组托时间" sortable></vxe-column>
      <vxe-column field="组托人" title="组托人" sortable></vxe-column>
      <vxe-column field="物料" title="物料" sortable show-overflow></vxe-column>
      <vxe-column field="供应商" title="供应商" sortable show-overflow></vxe-column>
      <vxe-column field="批次" title="批次" sortable show-overflow></vxe-column>
      <vxe-column field="组托数量" title="组托数量" sortable show-overflow align="right"></vxe-column>
      <vxe-column field="操作" title="操作" fixed="right" width="200">
        <template #default>
          <a-button type="link">作废</a-button>
          <a-button type="link">编辑</a-button>
          <a-button type="link" danger>删除</a-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
      icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
      icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
    </vxe-pager>
  </a-card>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "容器码": "IN_20231010_0001",
          "通知单号": "IN_20231010_0001",
          "组托时间": "2023-10-10",
          "组托人": "张三",
          "物料": "花键轴100*33",
          "供应商": "天津新材料股份有限公司",
          "批次": "20231010",
          "组托数量": "50",
          "备注": "",
        },
        {
          "容器码": "IN_20231010_0001",
          "通知单号": "IN_20231010_0001",
          "组托时间": "2023-10-10",
          "组托人": "张三",
          "物料": "花键轴100*33",
          "供应商": "天津新材料股份有限公司",
          "批次": "20231010",
          "组托数量": "50",
          "备注": "",
        },
        {
          "容器码": "IN_20231010_0001",
          "通知单号": "IN_20231010_0001",
          "组托时间": "2023-10-10",
          "组托人": "张三",
          "物料": "花键轴100*33",
          "供应商": "天津新材料股份有限公司",
          "批次": "20231010",
          "组托数量": "50",
          "备注": "",
        },
      ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less"></style>